<template name="ThreadDetail">
  <div class="thread-details">
    <div class="box box-widget" id="thread-details-accordion">
      {{#let thread=this}}
        {{#each details}}
          {{> Template.dynamic template=threadDetailTemplate data=thread}}
        {{/each}}
      {{/let}}
    </div>
  </div>
</template>

<template name="ThreadDetailAbout">
  <div class="panel flat-panel thread-detail">
    <div class="flat-panel-body">
      <div class="title">{{subject}}</div>
      <div class="small text-muted">{{_ "thread_created_by_and_when" name=user.name time=(formatDayWithTime createdAt)}}</div>
    </div>
  </div>
</template>

<template name="ThreadDetailMembers">
  <div class="panel flat-panel">
    <div class="flat-panel-heading">
      <a data-parent="#thread-details-accordion" href="#members" data-toggle="collapse">
        {{#if showAddMember}}
          <span id="btn-add-member" class="pull-right small text-muted" style="padding-top: 3px;">
            <i class="fa fa-plus-circle"></i> {{_ "app_action_add"}}
          </span>
        {{/if}}
        <div class="flat-panel-title">
          <i class="fa fa-users text-success"></i>
          {{_ "thread_members"}} ({{threadUsers.count}})
        </div>
      </a>
    </div>
    <div id="members" class="flat-panel-body no-padding panel-collapse collapse in">
      {{> ThreadMembers}}
    </div>
  </div>
</template>

<template name="ThreadMembers">
  <ul class="list-group members-list" style="max-height: calc(100vh - 330px); overflow-y: auto;">
    {{#each threadUsers}}
      <li class="list-group-item members-item clearfix">
        {{#LinkToCardModal user=user class="pull-left"}}
          {{> avatar user=user shape="circle" class="img-circle pull-left" size="small"}}
        {{/LinkToCardModal}}

        {{#if showRemove}}
          <a href="#" class="btn-remove-member text-muted small pull-right action" data-type="{{userType}}" data-id="{{userId}}">
            <i class="fa fa-times"></i> {{_ 'app_action_remove'}}
          </a>
        {{/if}}

        <div class="members-info">
          {{#LinkToCardModal user=user}}
            <strong class="name">{{user.name}}</strong>
          {{/LinkToCardModal}}
          <span>{{user.title}}</span>
          <div class="text-muted text-ellipsis">{{user.email}}</div>
        </div>
      </li>
    {{/each}}
  </ul>
</template>
